<template>
  <div class="h-full flex flex-col">
    <div class="login">
      <div class="left">
        <img src="@/assets/logn11.png" alt="">
      </div>
      <div class="right">
        <!-- <a-button type="link" class="header_css" @click="submitChange"><a-icon type="swap" />{{ title }}</a-button> -->
        <div class="right-content">
          <!-- 账号密码登录 -->
          <img src="@/assets/logo.png"  style="width: 125px;height: 125px" alt="">
          <p>{{ $t('user.verification-code.required111566110577343') }}</p>
          <a-form :form="form" style="width: 300px; margin: auto;">
            <a-form-item>
              <a-input :placeholder="$t('user.verification-code.required111566110577344')"
                v-decorator="['userName', { rules: [{ required: true, message: $t('user.verification-code.required111566110577345') }] }]">
                <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-input :placeholder="$t('user.verification-code.required111566110577346')" type="password"
                v-decorator="['userPassword', { rules: [{ required: true, message: $t('user.verification-code.required111566110577346') }] }]">
                <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="submitCreate">{{ $t('user.verification-code.required111566110577347')
              }}</a-button>
            </a-form-item>
          </a-form>
          <div style="display: flex;justify-content: space-evenly;width: 50%;margin-left: 25%;">
            <a href="http://www.baidu.com" style="color: #5077a5;" target="_blank">数据主体权利管理</a>
            <a href="https://119.188.246.51:844/#/login?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoyLCJ1c2VyX25hbWUiOiJyb290IiwiaWRlbnRpdHkiOiIwIn0.TaCdAjj142z9Z2JDNuVBozmhZH9mKNN-grvivu1jneE" style="color: #5077a5;"  target="_blank">合规报告和备案管理</a>
          </div>
        </div>
        <!-- <div class="right-content" v-else>
          <div id="wx_qrcode" class="w-[300px] h-[400px] mx-auto ml-[250px] mt-[250px]"></div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import storage from "store";
import { getUserInfo } from '@/api/index'
export default {
  data() {
    return {
      login: 2,
      title: "切换到账号密码登录",
      // 表单数据
      form: this.$form.createForm(this)
    }
  },
  mounted() {
    // const { code } = getQueryObject()
    // if (code) {
    //   this.QRScan(code)
    // }
    // const isProd = process.env.NODE_ENV == 'production'
    // const prod_url = `http://www.aidolphins.com:8888/sign`
    // const dev_url = `http://admin.aidolphins.com:9528/sign`
    // new WwLogin({
    //   id: 'wx_qrcode', // 登录页面显示二维码的容器id
    //   appid: 'ww7e7725d921c962e8',
    //   agentid: isProd ? '1000007' : '1000011',
    //   redirect_uri: encodeURIComponent(isProd ? prod_url : dev_url), // 重定向的地址，需要进行encode
    //   href: '',
    // })
  },
  methods: {
    ...mapActions(['Login', 'Logout', 'UserLogin']),
    async submitChange() {
      if (this.login == 2) {
        this.login = 1
        this.title = this.$t('user.verification-code.required111566110577348')
      } else {
        this.login = 2
        this.title = this.$t('user.verification-code.required111566110577349')
        location.reload()
      }
    },
    submitCreate() {
      const {
        form: { validateFields },
      } = this
      // 按钮loading
      this.loading = true
      validateFields({ force: true }, async (err, values) => {
        if (!err) {
          localStorage.setItem('loginType', JSON.stringify('0'))
          this.UserLogin({ ...values })
            .then((data) => this.loginSuccess(data))
            .catch((err) => this.requestFailed(err))
        } else {
          setTimeout(() => {
          }, 600)
        }
      })
    },
    QRScan(code) {
      if (code) {
        this.Login({ code })
          .then((res) => this.loginSuccess(res))
          .catch((err) => this.requestFailed(err))
      } else {
        this.requestFailed(this.$t('user.verification-code.required111566110577350'))
      }
    },
    loginSuccess() {
      return new Promise(async (resolve, reject) => {
        try {
          const { data } = await getUserInfo()
          let array = data.featureAlias
          if (array.includes("userportal")) {
            this.$router.push({ path: '/Portal' })
          } else {
            this.$router.push({ path: '/' })
          }
        } catch (error) {
        }
      })

    },
    requestFailed(err) {
      this.$notification['error']({
        message: this.$t('user.verification-code.required111566110577351'),
        description: err || this.$t('user.verification-code.required111566110577352'),
        duration: 4,
      })
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  display: flex;

  .left {
    width: 60%;
    height: 100vh;

    img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }

  .right {
    .header_css {
      right: 0;
      position: absolute;
      margin-right: 20px;
      margin-top: 20px;
      background-color: #D5E5FF;
      color: rgba(36, 89, 229, 1);
      box-shadow: none;
      opacity: 0.92;
      border-radius: 4px;
    }

    width: 40%;
    height: 100vh;
    margin: 0 auto;
    text-align: left;

    .right-content {
      margin-top: 200px;

      img {
        width: 100px;
        height: 100px;
        margin: 0 auto;
        display: block;
      }

      p {
        text-align: center;
        font-size: 20px;
        line-height: 50px;
        font-weight: 700;
        margin-top: 20px;
        margin-bottom: 20px;
      }

      .remember {
        text-align: left;
        margin-top: -15px;
      }

      .ant-form {
        .ant-btn {
          width: 100%;
          height: 40px;
          margin-top: 15px;
        }
      }
    }

  }
}
</style>